<template>
  <view>
    <view v-if="list.length > 0">
      <view class="pad30">
        <view class="flex-align flex-between mb30">
          <view class="flex-align">
            <image
              v-if="checkList.length == count"
              class="mr10"
              src="@/static/images/on.png"
              mode="scaleToFill"
              style="width: 40rpx; height: 40rpx"
              @tap="tapCannelAll"
            />
            <image
              v-else
              class="mr10"
              src="@/static/images/no.png"
              mode="scaleToFill"
              style="width: 40rpx; height: 40rpx"
              @tap="tapAll"
            />
            全部选中
          </view>
          <view class="flex-align" v-if="showClear">
            <text class="mr20" @tap="clearCart">清空</text>
            <text @tap="showClear = false">取消</text>
          </view>
          <view class="flex-align" v-else @tap="showClear = true">
            <image class="mr10" src="@/static/images/gl.png" mode="scaleToFill" style="width: 40rpx; height: 40rpx" />
            管理
          </view>
        </view>
        <view class="bg pad30 mb10" v-for="(item, idx) in list" :key="idx">
          <view class="flex-align mb40">
            <text class="ml10 mr10">{{ item.createTime }}</text>
          </view>
          <view v-for="(v, i) in item.goodsList" :key="i">
            <u-swipe-action>
              <u-swipe-action-item :options="options" :index="i" :name="v" @click="clickAction">
                <view class="flex-align mb30">
                  <image
                    class="mr10"
                    src="@/static/images/on.png"
                    mode="scaleToFill"
                    style="width: 40rpx; height: 40rpx"
                    v-if="v.state"
                    @tap="checkList.splice(i, 1), (v.state = !v.state)"
                  />
                  <image
                    class="mr10"
                    src="@/static/images/no.png"
                    mode="scaleToFill"
                    style="width: 40rpx; height: 40rpx"
                    v-else
                    @tap="checkList.push(v), (v.state = !v.state)"
                  />
                  <image class="ml30 mr30" :src="v.imgUrl" mode="scaleToFill" style="width: 200rpx; height: 200rpx" />
                  <view class="" style="width: 320rpx">
                    <view class="line2">{{ v.clothName }}</view>
                    <view class="f12 color-info mb50 mt10">{{ v.color }}色 {{ v.spec }}</view>
                    <view class="flex-align flex-between">
                      <text
                        >￥<text class="f18">{{ v.price }}</text></text
                      >
                      <u-number-box
                        v-model="v.number"
                        :integer="true"
                        :max="v.stockNumber"
                        @change="changeNumber(v.number, v.id)"
                      >
                        <template #minus>
                          <view class="minus">
                            <u-icon name="minus" color="#FFFFFF" size="12"></u-icon>
                          </view>
                        </template>
                        <template #input>
                          <text style="width: 30px; text-align: center" class="input">
                            {{ v.number }}
                          </text>
                        </template>
                        <template #plus>
                          <view class="plus">
                            <u-icon name="plus" color="#FFFFFF" size="12"></u-icon>
                          </view>
                        </template>
                      </u-number-box>
                    </view>
                  </view>
                </view>
              </u-swipe-action-item>
            </u-swipe-action>
          </view>
        </view>
      </view>
      <view class="price-con flex-align flex-between">
        <view class="flex-align ml30">
          <text class="color-info">已选中{{ checkList.length }}件，合计：</text>
          <text
            >￥<text class="f18">{{ totalPrice.toFixed(2) }}</text></text
          >
        </view>
        <view class="btn flex-center" @tap="tapSum">结算</view>
      </view>
    </view>
    <view class="mt100" v-else>
      <u-empty></u-empty>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onShow } from '@dcloudio/uni-app'
import homeApi from '@/api/homeApi'
import { computed, ref } from 'vue'

const options = ref([
  {
    icon: 'trash',
    iconSize: '24',
    text: '删除',
    style: {
      fontSize: '14px',
      color: ' #000',
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#D7C998',
    },
  },
])
const list: any = ref([])
onShow(() => {
  count.value = 0
  goodsList.value = []
  list.value = []
  checkList.value = []
  getCartList()
})
// 商品总数
const count = ref(0)
// 全部商品列表
const goodsList: any = ref([])
// 购物车列表
const getCartList = () => {
  homeApi
    .getCartList({
      userId: uni.getStorageSync('userId'),
    })
    .then((res: any) => {
      if (res.data && res.data.length > 0) {
        for (let item of res.data) {
          for (let v of item.goodsList) {
            v['state'] = false
            count.value++
            goodsList.value.push(v)
          }
        }
        list.value = res.data
      } else {
        list.value = []
      }
    })
}
/* 点击滑动操作   删除 */
const clickAction = (data: any) => {
  homeApi.deleteOneCart({ id: data.name.id }).then((res: any) => {
    if (res.success) {
      getCartList()
    }
  })
}
// 数量修改
const changeNumber = (value: number, id: number) => {
  checkList.value = []
  goodsList.value = []
  homeApi
    .updateCartNum({
      id,
      number: value,
    })
    .then((res: any) => {
      if (res.success) {
        getCartList()
      }
    })
}
//
const checkList: any = ref([])
const totalPrice = computed(() => {
  if (checkList.value.length > 0) {
    return checkList.value.reduce((acc: number, cur: any) => {
      return acc + cur.price * cur.number
    }, 0)
  } else {
    return 0.0
  }
})

// 全部选中
const tapAll = () => {
  checkList.value = goodsList.value
  for (let item of list.value) {
    for (let v of item.goodsList) {
      v['state'] = true
    }
  }
}
// 全部取消选中
const tapCannelAll = () => {
  checkList.value = []
  for (let item of list.value) {
    for (let v of item.goodsList) {
      v['state'] = false
    }
  }
}

const showClear = ref(false)
const clearCart = () => {
  uni.showModal({
    title: '提示',
    content: '确定清空购物车吗？',
    success: (res) => {
      if (res.confirm) {
        homeApi.clearCart({ userId: uni.getStorageSync('userId') }).then((res: any) => {
          if (res.success) {
            showClear.value = false
            getCartList()
          }
        })
      }
    },
  })
}
// 结算
const tapSum = () => {
  if (checkList.value.length == 0) {
    uni.showToast({ title: '请选择商品', icon: 'none' })
    return
  }
  uni.setStorageSync('goodsList', checkList.value)
  uni.navigateTo({
    url: `/my/balance`,
  })
}
</script>
<style>
page {
  padding-bottom: 100rpx;
  background-color: #f7f7f7;
}
</style>
<style lang="scss" scoped>
.price-con {
  position: fixed;
  width: 100%;
  bottom: 0;
  height: 120rpx;
  border-top: 1px solid #f8f8f8;
  background-color: #fff;
  z-index: 999;

  .btn {
    color: #fff;
    width: 240rpx;
    height: 100%;
    background-color: #111111;
  }
}

.minus {
  width: 22px;
  height: 22px;
  background-color: #999999;
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.input {
  padding: 0 5px;
}

.plus {
  width: 22px;
  height: 22px;
  background-color: #111111;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
